<template>
	<view class="wapper">
		<u-navbar :autoBack="true"  :fixed="false" :titleStyle="{ color: '#000' }" bgColor="#fff" title="物资请购"></u-navbar>
		<search @search="search" ref="search" />
		<scroll-view style="height:calc(100vh - 200rpx)" scroll-y="true" @scrolltolower="loadmore">
			<template v-if="list && list.length>0">
				<view class="list">
					<view class="item" v-for="(item ,index) in list" :key="index"
						@click="navTo('/subMaintenance/purchase/detail?id='+item.id)">
						<view class="item-title">
							<!-- // 1审批中 2待完成 3待验收 4已完成 5已驳回 6待采购-->
							<view class="title">{{item.purchaseNo}}</view>
							<view class="tag-blue" v-if="item.workOrderStatus===1">审批中</view>
							<view class="tag-yellow" v-if="item.workOrderStatus===2">待完成</view>
							<view class="tag-orange" v-if="item.workOrderStatus===3">待验收</view>
							<view class="tag-black" v-if="item.workOrderStatus===4">已完成</view>
							<view class="tag-red" v-if="item.workOrderStatus===5">已驳回</view>
							<view class="tag-orange" v-if="item.workOrderStatus===6">待采购</view>
						</view>
						<view class="item-mid">
							<view class="name">{{item.deptName}}</view>
							<view class="money">¥
								<text class="number">{{item.totalPrice}}</text>
							</view>

						</view>
						<view class="item-bottom">
							<view class="name">
								领用人：{{item.createByName}}
							</view>
							<view class="time">
								发起时间：{{item.createTime}}
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</template>
			<template v-else>
			<u-empty v-if="params.keyWord" text="暂无搜索结果" width="320rpx" height="320rpx" icon="../../static/image/list-no-data.png"
				class="nodata"></u-empty>
			<u-empty  v-else  text="暂无数据" width="320rpx" height="320rpx" icon="../../static/image/chart-no-data.png"
				class="nodata"></u-empty>
			</template>
		</scroll-view>
		<view class="footer">
			<view class="btn" @click="navTo('/subMaintenance/purchase/add')">申请物资采购</view>
		</view>
	</view>
</template>

<script>
	import {
		getPurchaseList
	} from '@/api/purchase.js'
	import search from '@/components/search/index.vue'
	export default {
		components: {
			search
		},
		filters: {

		},
		data() {
			return {
				status: 'loadmore',
				list: [],
				params: {
					keyWord: '',
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
				isLoading: false

			}
		},
		onShow() {
			this.params = {
				keyWord: '',
				pageNum: 1,
				pageSize: 10
			}
			this.list = []
			this.getList()
		},
		onHide() {
			this.$refs.search.clearSearch()
		},
		created() {

		},
		onPullDownRefresh() {
			this.params.pageNum = 1
			this.total = 0
			this.isloading = false
			this.list = []
			this.getList(() => uni.stopPullDownRefresh())
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			loadmore() {

				if (this.list.length >= this.total) {
					this.status = 'nomore'
					return
				}
				this.params.pageNum = this.params.pageNum + 1
				this.getList()
			},
			search(keyword) {
				this.params.keyWord = keyword
				this.params.pageNum = 1
				this.list = []
				this.getList()
			},
			async getList(cb) {
				this.status = 'loading';
				uni.showLoading({
					title: '加载中'
				})
				this.isLoading = false
				// 只要数据请求完毕，就立即按需调用 cb 回调函数
				cb && cb()
				getPurchaseList(this.params).then(res => {
					const {
						total,
						rows
					} = res
					if (rows && rows.length > 0) {
						this.list = [...this.list, ...rows]
					}
					this.total = total
					if (total === 0 || this.list.length === this.total) {
						this.status = 'nomore'
					}
				}).finally(() => {
					uni.hideLoading()
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.wapper {
		width: 100vw;
		min-height: 100vh;
		background: #F5F7F9;

		.list {
			width: 100vw;

			.item {
				margin-top: 10rpx;
				background: #fff;

				.item-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 1rpx solid #F2F6FC;
					padding: 27rpx 30rpx 22rpx 30rpx;

					.title {
						font-size: 26rpx;
						font-weight: 400;
						color: #909399;
					}

					.tag-blue {
						width: 80rpx;
						height: 36rpx;
						background: rgba(54, 133, 230, 0.1);
						border-radius: 4rpx;
						border: 2rpx solid #3685E6;
						line-height: 36rpx;
						text-align: center;
						font-size: 20rpx;
						font-weight: 500;
						color: #3685E6;
					}

					.tag-yellow {
						width: 80rpx;
						height: 36rpx;
						background: rgba(241, 195, 23, 0.1);
						border-radius: 4rpx;
						border: 2rpx solid #F1C317;
						line-height: 36rpx;
						text-align: center;
						font-size: 20rpx;
						font-weight: 500;
						color: #F1C317;
					}

					.tag-orange {
						width: 80rpx;
						height: 36rpx;
						background: rgba(#FF8C21, 0.1);
						border-radius: 4rpx;
						border: 2rpx solid #FF8C21;
						line-height: 36rpx;
						text-align: center;
						font-size: 20rpx;
						font-weight: 500;
						color: #FF8C21;
					}

					.tag-black {
						width: 80rpx;
						height: 36rpx;
						background: rgba(#BBBFC7, 0.1);
						border-radius: 4rpx;
						border: 2rpx solid #BBBFC7;
						line-height: 36rpx;
						text-align: center;
						font-size: 20rpx;
						font-weight: 500;
						color: #BBBFC7;
					}

					.tag-red {
						width: 80rpx;
						height: 36rpx;
						background: rgba(#FF654E, 0.1);
						border-radius: 4rpx;
						border: 2rpx solid #FF654E;
						line-height: 36rpx;
						text-align: center;
						font-size: 20rpx;
						font-weight: 500;
						color: #FF654E;
					}
				}

				.item-mid {
					padding: 50rpx 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.name {
						font-size: 30rpx;
						font-weight: 500;
						color: #323232;
						margin-bottom: 8rpx;
					}

					.money {
						font-size: 26rpx;
						font-weight: 500;
						color: #FF654E;

						.number {
							font-size: 40rpx;
						}
					}
				}

				.item-bottom {
					border-top: 1rpx solid #F2F6FC;
					margin: 0 30rpx;
					height: 82rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 26rpx;
					font-weight: 400;
					color: #909399;
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 63rpx;
			left: 250rpx;
			right: 250rpx;
			z-index: 11;
			width: 250rpx;

			.btn {
				width: 250rpx;
				height: 80rpx;
				background: linear-gradient(127deg, #AFB2FF 0%, #3F8BFF 100%);
				border-radius: 44rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>
